<template>
  <div v-show="item.type !== 10" class="chat-item" :class="['type-' + item.type]">
    <div ref="refBubble" class="bubble">
      <span>
        {{ displayContent }}
      </span>
      <span v-if="!expand && overlength" class="expand" @click="expandItem"> 展开</span>
      <div ref="refMenu" v-show="showMenu" @click="menuClick" class="press-menu">
        <img src="./icon-copy.png" />
        <div>生成报告</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLongPress } from '@vueuse/core'
import { onClickOutside } from '@vueuse/core'

const props = defineProps<{
  item: TypeConversationItem
}>()

const emit = defineEmits(['menu'])
const showMenu = ref(false)
const refBubble = ref<HTMLElement | null>(null)
const refMenu = ref<HTMLElement | null>(null)

// onLongPress(
//   refBubble,
//   (e: PointerEvent) => {
//     e.preventDefault()
//     if (props.item.isReport) {
//         // report
//       showMenu.value = true
//     }
//   },
//   {
//     modifiers: { prevent: true }
//   }
// )

onClickOutside(refMenu, () => {
  showMenu.value = false
})

const menuClick = () => {
  emit('menu')
}

const expand = ref(false)
const overlength = computed(() => {
  const content = props.item.content
  return content.length > 80
})
const displayContent = computed(() => {
  const content = props.item.content
  if (expand.value) return content
  if (overlength.value) {
    return content.slice(0, 80) + '...'
  }

  return content
})

const expandItem = () => {
  expand.value = true
}
</script>

<style lang="less" scoped>
.chat-item {
  padding: 10px 13px;
  font-size: 14px;
  display: flex;

  .press-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    background: #4c4c4c;
    border-radius: 5px;
    color: #fff;
    font-weight: medium;
    font-size: 14px;
    text-align: center;
    padding: 13px 5px;
    &:after {
      content: '';
      position: absolute;
      width: 0px;
      height: 0px;
      left: calc(50% - 5px);
      border-bottom: 5px solid #4c4c4c;
      border-top: 5px solid transparent;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      top: -10px;
    }
    img {
      width: 20px;
      height: 20px;
    }
  }

  .bubble {
    padding: 16px;
    border-radius: 23px;
    color: #fff;
    max-width: 250px;
    line-height: 1.2;

    position: relative;
    .expand {
      color: #348aff;
    }
  }
  &.type-1 {
    // sent
    justify-content: flex-end;
    .bubble {
      border-top-right-radius: 0px;
      background-color: #2c84fc;
    }
  }
  &.type-2 {
    // received
    .bubble {
      color: #000;
      border-top-left-radius: 0px;
      background-color: #fff;
    }
  }
}
</style>
